<template>
  <div class="add-product-container">
    <el-card class="form-card">
      <template #header>
        <div class="card-header">
          <span>新增商品</span>
        </div>
      </template>
      
      <el-form 
        ref="productForm" 
        :model="productForm" 
        :rules="rules" 
        label-width="120px"
        label-position="top"
      >
        <el-form-item label="商品名称" prop="productName">
          <el-input v-model="productForm.productName" placeholder="请输入商品名称" />
        </el-form-item>
        
        <el-form-item label="品牌" prop="productBrand">
          <el-input v-model="productForm.productBrand" placeholder="请输入品牌" />
        </el-form-item>
        
        <el-form-item label="类型" prop="productType">
          <el-input v-model="productForm.productType" placeholder="请输入商品类型" />
        </el-form-item>
        
        <el-form-item label="价格" prop="productPrice">
          <el-input-number 
            v-model="productForm.productPrice" 
            :min="0" 
            :precision="2" 
            controls-position="right"
          />
        </el-form-item>
        
        <el-form-item label="颜色" prop="productColor">
          <el-input v-model="productForm.productColor" placeholder="请输入商品颜色" />
        </el-form-item>
        
        <el-form-item label="尺寸" prop="productSize">
          <el-input v-model="productForm.productSize" placeholder="请输入商品尺寸" />
        </el-form-item>
        
        <el-form-item label="库存数量" prop="productCount">
          <el-input-number v-model="productForm.productCount" :min="0" />
        </el-form-item>
        
        <el-form-item label="商品图片" prop="productMainImg">
          <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :on-change="handleImageChange"
            :show-file-list="false"
          >
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                {{ productForm.productMainImg ? '已选择图片: ' + productForm.productMainImg.name : '请上传商品主图' }}
              </div>
            </template>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="商品产地" prop="productArea">
          <el-input v-model="productForm.productArea" placeholder="请输入商品产地" />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { productcheckAPI } from '@/http'

interface ProductForm {
  productName: string
  productBrand: string
  productType: string
  productPrice: number | null
  productColor: string
  productSize: string
  productCount: number | null
  productMainImg: any
  productArea: string
}

const productForm = reactive<ProductForm>({
  productName: '',
  productBrand: '',
  productType: '',
  productPrice: null,
  productColor: '',
  productSize: '',
  productCount: null,
  productMainImg: null,
  productArea: ''
})

const productForm = ref<FormInstance>()

const rules = reactive<FormRules<ProductForm>>({
  productName: [
    { required: true, message: '请输入商品名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  productBrand: [
    { required: true, message: '请输入品牌', trigger: 'blur' }
  ],
  productType: [
    { required: true, message: '请输入商品类型', trigger: 'blur' }
  ],
  productPrice: [
    { required: true, message: '请输入价格', trigger: 'blur' }
  ],
  productCount: [
    { required: true, message: '请输入库存数量', trigger: 'blur' }
  ]
})

const handleImageChange = (file: any) => {
  productForm.productMainImg = file
}

const submitForm = async () => {
  if (!productForm.value) return
  
  try {
    await productForm.value.validate()
    
    const formData = new FormData()
    formData.append('productName', productForm.productName)
    formData.append('productBrand', productForm.productBrand)
    formData.append('productType', productForm.productType)
    formData.append('productPrice', String(productForm.productPrice))
    formData.append('productColor', productForm.productColor)
    formData.append('productSize', productForm.productSize)
    formData.append('productCount', String(productForm.productCount))
    if (productForm.productMainImg) {
      formData.append('file', productForm.productMainImg.raw)
    }
    formData.append('productArea', productForm.productArea)
    
    await productcheckAPI.addProduct(formData)
    ElMessage.success('商品添加成功')
    resetForm()
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error('提交失败，请检查表单')
  }
}

const resetForm = () => {
  if (!productForm.value) return
  productForm.value.resetFields()
  productForm.productMainImg = null
}
onMounted(() => {
    console.log('mounted');
    })
</script>

<style scoped>
.add-product-container {
  padding: 20px;
}

.form-card {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.el-form-item {
  margin-bottom: 22px;
}

.upload-demo {
  width: 100%;
}
</style>